<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4489529_lsphu8cfmz.css">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      box-sizing: border-box;
      width: 480px;
      margin: 100px auto;
    }

    .logo {
      width: 72px;
      height: 72px;
      margin: 0 auto;
    }

    h3 {
      font-size: 40px;
      text-align: center;
      font-weight: 400;
      margin: 20px auto 40px;
    }

    .email-box {
      position: relative;

    }

    .email-box .icon {
      position: absolute;
      top: 10px;
      right: 20px;
    }

    .email-box .icon .iconfont {
      font-size: 20px;
      color: aquamarine;
      display: none;
    }

    .password-box {
      position: relative;

    }

    .password-box .icon {
      position: absolute;
      top: 10px;
      right: 20px;
    }

    .password-box .icon span {
      display: inline;
      width: 60px;
    }


    .password-box .icon .iconfont {
      display: inline-block;
      font-size: 20px;
    }

    .password-box .icon .icon-yanjing {
      font-weight: 600;
    }

    .password-box .icon .icon-zhengquewancheng-yuankuang {
      margin-left: 10px;
      color: aquamarine;
      display: none;
    }

    .password-box .icon .icon-zhengquewancheng-yuankuang.active {
      float: right;
      display: block
    }

    .email-box .content,
    .password-box .content,
    .code-box .content {
      outline: none;
      box-sizing: border-box;
      width: 480px;
      padding: 10px 20px;
      font-size: 18px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .email-tips,
    .password-tips,
    .phone-tips,
    .code-tips,
    .check-tips {
      width: 100%;
      height: 25px;
      line-height: 25px;
      font-size: 12px;
      color: #666;
      margin-bottom: 5px;
    }

    .phone-wrap {
      overflow: hidden;
    }

    .phone {
      float: left;
      box-sizing: border-box;
      width: 350px;
      padding: 10px 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      border-radius: 4px;
      font-size: 18px;
      color: #666;
    }

    .phone .content {
      width: 250px;
      font-size: 18px;
      border: none;
      outline: none;
    }

    .identify-code {
      float: right;
    }

    .identify-code .btn {
      box-sizing: border-box;
      width: 120px;
      height: 47px;
      font-size: 18px;
      color: #deb42b;
      border: 1px solid #c4a233;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
    }

    .identify-code .btn:hover {
      background-color: #f2f2f2;
    }

    .reg-btn button {
      box-sizing: border-box;
      width: 480px;
      height: 50px;
      border: none;
      border-radius: 2px;
      font-size: 24px;
      color: #ffde9e;
      background: linear-gradient(to right, #151c2b, #5a5f6d);
      cursor: pointer;
    }

    .tips {
      display: none;
    }

    .error-tips i {
      color: red;
      font-size: 12px;
      margin-right: 3px;
    }

    .check-box {
      user-select: none;
    }

    .check-box input {
      display: none;
    }



    .check-box .kuang {
      vertical-align: middle;
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 1px solid #000;
      margin-bottom: 2px;
      border-radius: 4px;
      text-align: center;
      line-height: 14px;
    }

    .check-box .kuang .iconfont {
      font-size: 12px;
      color: #ab8807;
    }

    #agree:checked+label .kuang {
      background-color: #fdc601;
    }

    #agree:checked+label .kuang .icon-duigou {
      color: #000;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="logo">
      <img src="./images/download.png" alt="">
    </div>
    <h3>注册网易VIP邮箱</h3>
    <div class="register-box">
      <div class="email-box">
        <div class="icon">
          <span><i class="iconfont icon-zhengquewancheng-yuankuang"></i></span>
        </div>
        <input class="content input" type="text" placeholder="准备注册邮箱账号">
        <div class="email-tips">
          <div class="tips default-tips">以字母开头，使用5到20个字符组合（字母、数字、点、下划线）</div>
          <div class="tips error-tips"><i class="iconfont icon-cuowu"></i>账号不能为空</div>
        </div>
      </div>
      <div class="password-box">
        <div class="icon">
          <span><i class="iconfont icon-yanjing"></i><i class="iconfont icon-zhengquewancheng-yuankuang"></i></span>

        </div>
        <input class="content input" type="password" placeholder="密码">
        <div class="password-tips">
          <div class="tips default-tips">使用8到16个字符组合，至少包含大小写字母、数字和符号中的3种</div>
          <div class="tips error-tips"><i class="iconfont icon-cuowu"></i><span>密码长度应为8-16个字符</span></div>
        </div>
      </div>
      <div class="phone-box">
        <div class="phone-wrap">
          <div class="phone">
            <span class="phone-num">+86</span>
            <input class="content input" type="text" placeholder="手机号码">
          </div>
          <div class="identify-code">
            <button class="btn">获取验证码</button>
          </div>
        </div>
        <div class="phone-tips">
          <div class="tips error-tips">
            <i class="iconfont icon-cuowu"></i><span>手机号不能为空</span>
          </div>
        </div>
      </div>
      <div class="code-box">
        <input class="content input" type="text" placeholder="验证码">
        <div class="code-tips">
          <div class="tips error-tips">
            <i class="iconfont icon-cuowu"></i><span>验证码不能为空</span>
          </div>
        </div>
      </div>
      <div class="check-box">
        <input type="checkbox" name="agree" id="agree">
        <label for="agree">
          <div class="kuang">
            <i class="iconfont icon-duigou"></i>
          </div>
          <span>同意</span>
        </label><span>《服务条款》、《服务条款》和《儿童隐私政策》</span>
        <div class="check-tips">
          <div class="tips error-tips">
            <i class="iconfont icon-cuowu"></i><span>请勾选同意服务条款</span>
          </div>
        </div>
        <div class="reg-btn">
          <button>注册</button>
        </div>
      </div>
    </div>
  </div>
  <script>

    //定义点击注册按钮之后判断是否成功
    let correctEmail = ''
    let correctPassword = ''
    let correctPhone = ''
    let correctCode = ''
    let correctAgree = false
    //首先操作邮箱  
    const email = document.querySelector('.email-box .content')
    //input获取鼠标之后，默认提示显示出来
    email.addEventListener('focus', function () {
      this.nextElementSibling.querySelector('.email-tips .default-tips').style.display = 'block'
      this.nextElementSibling.querySelector('.email-tips .error-tips').style.display = 'none'
      this.previousElementSibling.querySelector('.iconfont').style.display = 'none'
    })
    //input 失去焦点之后，判断输入的是否正确，如果不正确，错误提示输出
    //定义emailReg  以字母开头，剩下的为4 - 19 位 字母数字下划线或者点
    const emailReg = /^[a-zA-Z][\w.\S]{4,19}/

    email.onblur = function () {
      correctEmail = ''
      this.nextElementSibling.querySelector('.email-tips .default-tips').style.display = 'none'
      // 获取输入框中的内容
      let emailVal = this.value.trim()
      if (!emailReg.test(emailVal)) {
        this.nextElementSibling.querySelector('.email-tips .error-tips').style.display = 'block'
      } else {
        this.previousElementSibling.querySelector('.iconfont').style.display = 'block'
        correctEmail = emailVal
      }
    }


    //操作密码部分
    const pwd = document.querySelector('.password-box .content')
    // 密码框获取焦点
    pwd.addEventListener('focus', function () {
      // 显示密码的默认提示
      this.nextElementSibling.querySelector('.password-tips .default-tips').style.display = 'block'
      this.nextElementSibling.querySelector('.password-tips .error-tips').style.display = 'none'
      this.previousElementSibling.querySelector('.icon-zhengquewancheng-yuankuang').classList.remove('active')
    })
    //密码框失去焦点
    //定义密码的正则表达式
    //密码中不能含有空格
    // 密码需包含“大小写字母、数字、标点符号”中3种以上的组合
    const emptyReg = / /  //空格正则
    const number = /[0-9]/
    const upper = /[A-Z]/
    const lower = /[a-z]/
    const other = /[\W_]/  //非数字字母


    pwd.onblur = function () {
      correctPassword = ''
      //定义密码包含字符的个数（大写字母， 小写字母， 数字， 特殊字符）
      let num = 0
      if (number.test(this.value)) {
        num++
      }
      if (upper.test(this.value)) {
        num++
      }
      if (lower.test(this.value)) {
        num++
      }
      if (other.test(this.value)) {
        num++
      }
      // 显示密码的默认提示
      this.nextElementSibling.querySelector('.password-tips .default-tips').style.display = 'none'
      const pwdLen = this.value.length
      // console.log(length)
      let pwdVal = this.value.trim()
      if (pwdLen < 8 || pwdLen > 16) {
        this.nextElementSibling.querySelector('.password-tips .error-tips').style.display = 'block'
      } else if (emptyReg.test(pwdVal)) {
        this.nextElementSibling.querySelector('.password-tips .error-tips span').innerHTML = '密码中不能含有空格'
        this.nextElementSibling.querySelector('.password-tips .error-tips').style.display = 'block'
      } else if (num < 3) {
        this.nextElementSibling.querySelector('.password-tips .error-tips span').innerHTML = '密码需包含“大小写字母、数字、标点符号”中3种以上的组合'
        this.nextElementSibling.querySelector('.password-tips .error-tips').style.display = 'block'
      } else {
        this.previousElementSibling.querySelector('.icon-zhengquewancheng-yuankuang').classList.add('active')
        correctPassword = pwdVal
      }
    }



    //点击小眼睛图标，input 的属性type 进行切换  text 和password
    // 首先要获取小眼睛
    const eyeIcon = document.querySelector('.password-box .icon-yanjing')
    // 定义一个变量，用来却换点击小眼睛的状态
    let eyeStatus = false  //代表没有点击
    eyeIcon.onblur = function () {
      if (eyeStatus) {

        pwd.setAttribute('type', 'password')
        console.log(pwd.getAttribute('type'))
        this.style.color = '#000'
        eyeStatus = false
      } else {
        // 获取type属性
        pwd.setAttribute('type', 'text')
        console.log(pwd.getAttribute('type'))
        this.style.color = '#deb42b'
        eyeStatus = true
      }
    }

    //手机号注册

    let phoneNum = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
    const phone = document.querySelector('.phone-box .content')

    phone.onblur = function () {
      correctPhone = ''
      document.querySelector('.phone-tips .error-tips')
      // 如果手机号的input为空
      let phoneVal = this.value.trim()
      if (this.value.length === 0) {
        document.querySelector('.phone-tips .error-tips').style.display = "block"
      } else if (!phoneNum.test(phoneVal)) {
        document.querySelector('.phone-tips .error-tips').style.display = "block"
        document.querySelector('.phone-tips .error-tips span').innerHTML = '格式有误，请输入11位中国大陆手机号码'
      } else {
        document.querySelector('.phone-tips .error-tips').style.display = "none"
        correctPhone = phoneVal
      }
    }


    //验证码部分
    const code = document.querySelector('.code-box .content')

    code.onblur = function () {
      correctCode = ''
      let codeVal = this.value.trim()

      if (this.value.length === 0) {
        this.nextElementSibling.querySelector(' .error-tips').style.display = 'block'
      } else {
        this.nextElementSibling.querySelector(' .error-tips').style.display = 'none'
        correctCode = codeVal
      }
    }


    //服务条款部分

    const che = document.querySelector('.check-box #agree')

    che.onclick = function () {
      correctAgree = false
      if (this.checked == false) {
        this.parentNode.querySelector('.check-tips .error-tips').style.display = 'block'
      } else {
        this.parentNode.querySelector('.check-tips .error-tips').style.display = 'none'
        correctAgree = true
      }
    }



    //获取注册按钮
    const btn = document.querySelector('.reg-btn button')
    btn.addEventListener('click', function () {
      //首先判断服务条款是否勾选
      if (correctAgree == false) {
        che.onclick()
        return
      }
      //然后判断email是否为空
      if (correctEmail == '') {
        email.onblur()
        return
      }
      //然后判断密码是否为空
      if (correctPassword == '') {
        pwd.onblur()
        return
      }
      //然后判断手机号是否为空
      if (correctPhone == '') {
        phone.onblur()
        return
      }
      if (correctCode == '') {
        code.onblur()
        console.log(1344456)
        return
      }
      console.log('注册成功')

      //然后判断验证码是否为空
      // 最后登录成功
    })

  </script>

</body>

</html>